<script setup>
import { ref } from 'vue';

// 表格数据
const tableData = ref([
  {
    key: 1,
    subject: '数学',
    description: '基础代数题目',
    collectionTime: '2024-11-20',
    tags: '代数',
  },
  {
    key: 2,
    subject: '英语',
    description: '阅读理解题目',
    collectionTime: '2024-11-18',
    tags: '阅读',
  },
  {
    key: 3,
    subject: '语文',
    description: '文言文翻译',
    collectionTime: '2024-11-19',
    tags: '翻译',
  },
  {
    key: 4,
    subject: '数学',
    description: '几何图形题目',
    collectionTime: '2024-11-21',
    tags: '几何',
  },
  {
    key: 5,
    subject: '英语',
    description: '单词拼写题目',
    collectionTime: '2024-11-17',
    tags: '拼写',
  },
  {
    key: 6,
    subject: '语文',
    description: '现代文阅读',
    collectionTime: '2024-11-22',
    tags: '阅读',
  },
  {
    key: 7,
    subject: '数学',
    description: '概率与统计题目',
    collectionTime: '2024-11-15',
    tags: '统计',
  },
  {
    key: 8,
    subject: '英语',
    description: '语法改错题目',
    collectionTime: '2024-11-14',
    tags: '语法',
  },
  {
    key: 9,
    subject: '语文',
    description: '作文写作',
    collectionTime: '2024-11-23',
    tags: '写作',
  },
  {
    key: 10,
    subject: '数学',
    description: '函数与图像题目',
    collectionTime: '2024-11-13',
    tags: '函数',
  },
  {
    key: 11,
    subject: '英语',
    description: '听力训练题目',
    collectionTime: '2024-11-12',
    tags: '听力',
  },
  {
    key: 12,
    subject: '语文',
    description: '古诗词赏析',
    collectionTime: '2024-11-10',
    tags: '赏析',
  },
  {
    key: 13,
    subject: '数学',
    description: '矩阵运算题目',
    collectionTime: '2024-11-09',
    tags: '矩阵',
  },
  {
    key: 14,
    subject: '英语',
    description: '写作技巧练习',
    collectionTime: '2024-11-08',
    tags: '写作',
  },
  {
    key: 15,
    subject: '语文',
    description: '文言文默写',
    collectionTime: '2024-11-07',
    tags: '默写',
  },
]);

// 删除操作
const handleDelete = (key) => {
  tableData.value = tableData.value.filter((item) => item.key !== key);
};

// 修改操作
const handleEdit = (key) => {
  const editedItem = tableData.value.find((item) => item.key === key);
  if (editedItem) {
    const newDescription = prompt('请输入新的简介：', editedItem.description);
    if (newDescription !== null && newDescription.trim() !== '') {
      editedItem.description = newDescription.trim();
    }
  }
};
</script>

<template>
  <div class="table-container">
    <table class="custom-table">
      <thead>
      <tr>
        <th>科目</th>
        <th>简介</th>
        <th>收集时间</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="row in tableData" :key="row.key">
        <!-- 科目选择框 -->
        <td>
          <select v-model="row.subject">
            <option value="数学">数学</option>
            <option value="英语">英语</option>
            <option value="语文">语文</option>
          </select>
        </td>
        <!-- 简介 -->
        <td>{{ row.description }}</td>
        <!-- 收集时间 -->
        <td>{{ row.collectionTime }}</td>
        <!-- 标签 -->
        <td>{{ row.tags }}</td>
        <!-- 操作 -->
        <td>
          <button class="action-button edit" @click="handleEdit(row.key)">修改</button>
          <button class="action-button delete" @click="handleDelete(row.key)">删除</button>
          <button class="action-button look" @click="handleOther(row.key)">查看</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
/* 表格样式 */
.table-container {
  width: 100%;
  margin: 20px 0;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: Arial, sans-serif;
}

.custom-table th,
.custom-table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.custom-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

/* 按钮样式 */
.action-button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 5px;
}

.action-button.edit {
  background-color: #007bff;
  color: white;
}

.action-button.edit:hover {
  background-color: #0056b3;
}

.action-button.delete {
  background-color: #dc3545;
  color: white;
}

.action-button.delete:hover {
  background-color: #a71d2a;
}

.action-button.look {
  background-color: #2d3c91;
  color: white;
}

.action-button.look:hover {
  background-color: #1a2967;
}

/* 下拉框样式 */
select {
  padding: 5px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
</style>
